<template lang="pug">
div.map-controller
  div.ctrl-item(v-for="(item, index) in areaList"
    :class="{'active': isActive(item)}"
    :key="index" @click="handleCtrlItemClick(item)") {{item.name}}
</template>

<script>
import {mapGetters, mapMutations} from "vuex";

export default {
  name: "MapCtrl",
  data() {
    return {
      areaList: [
        {
          id: 'polygon-DeHong',
          name: '全部'
        },
        {
          id: 'polygon-YingJiang',
          name: '盈江县'
        },
        {
          id: 'polygon-LiangHe',
          name: '梁河县'
        },
        {
          id: 'polygon-LongChuan',
          name: '陇川县'
        },
        {
          id: 'polygon-MangShi',
          name: '芒市'
        },
        {
          id: 'polygon-RuiLi',
          name: '瑞丽市'
        },
      ]
    }
  },
  computed: {
    ...mapGetters({
      clickCtrl: 'map/clickCtrl',
    }),
    isActive() {
      return item => {
        if(!!this.clickCtrl.id) {
          return item.id === this.clickCtrl.id;
        }else{
          return item.id === 'polygon-DeHong';
        }
      }
    }
  },
  methods: {
    ...mapMutations({
      setClickCtrl: 'map/SET_CLICK_CTRL',
    }),
    handleCtrlItemClick(item) {
      this.setClickCtrl({
        ...item,
        from: 'ctrl',
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.map-controller{
  position: fixed;
  left: rem(600);
  top: 50%;
  transform: translateY(-30%);
  pointer-events: auto;
  z-index: 99999;
  .ctrl-item{
    padding: 0 rem(20);
    @include fontSie(28);
    color: white;
    height: rem(60);
    line-height: rem(60);
    margin-bottom: rem(20);
    /* Google Chrome */
    backdrop-filter: blur(5px);
    background: rgba(0, 73, 104, 0.26);
    cursor: pointer;
    text-align: center;
    font-weight: normal;
    &.active{
      color: #00cc87;
      font-weight: 700;
      &:before,
      &:after{
        visibility: visible;
      }
    }
    &:before,
    &:after{
      content: '';
      display: block;
      @include size(rem(6), rem(8));
      position: absolute;
      visibility: hidden;
    }
    &:before{
      top: rem(10);
      right: rem(10);
      border-top: rem(1) solid #05FDBB;
      border-right: rem(1) solid #05FDBB;
    }
    &:after{
      bottom: rem(10);
      left: rem(10);
      border-bottom: rem(1) solid #05FDBB;
      border-left: rem(1) solid #05FDBB;
    }
  }
}
</style>
